<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="/static/js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    {if !empty($card)}
    <title>{$card['store_name']}</title>
    {else}
    <title>电子名片</title>
    {/if}
</head>
<style>
    @media (min-width:0px){
        html{font-size:12px;}
    }
    @media (min-width: 320px){
        html{font-size:12px;}
    }
    @media (min-width: 340px){
        html{font-size:13px;}
    }
    @media (min-width: 360px){
        html{font-size:14px;}
    }
    @media (min-width: 380px){
        html{font-size:15px;}
    }
    @media (min-width: 400px){
        html{font-size:15px;}
    }
    @media (min-width: 420px){
        html{font-size:16px;}
    }
    *{margin: 0;padding: 0}
    .big{
        width: 90%;
        margin: 0 auto;

    }
    .card{
        width:100%;
        background:linear-gradient(-22deg,rgba(46,46,54,1),rgba(82,94,146,1));
        box-shadow:0px 20px 27px 0px rgba(122,122,122,0.28);
        border-radius:20px;
        margin-top: 2rem;
    }
    .name{
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(219,219,219,1);
        font-size: 1rem;
        margin-left: 40px;
        padding-top:1.8rem ;
    }
    .zong{
        width: 100%;
        height: 6rem;

        line-height: 6rem;
        margin-top: 10px;
    }
    .left{
        width: 63%;
        float: left;
    }
    .left a{
        color:rgba(255,255,255,1);
    }
    .right{
        width: 37%;
        float: right;
    }
    .both{
        clear: both;
    }
    .rename{
        font-size:1rem;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        padding-left: 39px;
    }
    .rename span{
        font-size:2.3rem;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
    .rename a{
        margin-left: 10px;
    }
    .img{
        width:6rem;
        height:6rem;
        border-radius:50%;
        display: block;
        margin-top: 12px;

    }
    .tel{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .tel_img{
        margin-left: 40px;
        width: 15px;
        height: 15px;
    }
    .tel p{
        margin-left: 20px;
        font-size:1rem;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
    .tel1{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 10px;
        padding-bottom: 15px;

    }
    .tel1 p{
        margin-left: 20px;
        font-size:1rem;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        overflow: hidden;
        padding-right: 10px;

    }
    .hr{
        width: 100%;
        height: 0.6rem;
        background: #eee;
        margin-top: 50px;
    }
    .img_qiang{
        height: 4rem;
        line-height: 4rem;
        font-size:1.4rem;
        font-family:Source Han Sans SC;
        font-weight:500;
    }
    .xian{
        height:1px;
        background:rgba(235,235,235,1);
        width: 100%;
    }
    ul{

    }
    ul li{
        float: left;
        list-style:none;
        width: 30%;
        height: 110px;
        margin-left: 10px;
        margin-top: 10px;

    }
    ul li img{
        width: 100%;
        height: 110px;
    }
    ul li:nth-child(3n+1){
        margin-left: 0px;
    }
    .title{
        font-size:1.3rem;
        font-family:Source Han Sans SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        text-align: center;
        margin-top: 40px;
    }
    #content{
        width: 85%;
        margin: 0 auto;
        font-size:1rem;
        font-family:Source Han Sans SC;
        font-weight:400;
        color:rgba(122,122,122,1);
        margin-top: 20px;
    }
    #zhan{
        display: block;
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        cursor: pointer;
        text-align: center;
    }
    #zhan img{
        width: 40px;
        height: 12px;
    }
    #kai{
        display: none;
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        cursor: pointer;
        text-align: center;
    }
    #kai img{
        width: 40px;
        height: 12px;
    }
    .wall{
        width: 90%;
        text-align: center;
        margin: 0 auto;
        margin-top: 40px;
    }
    .wall img{
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    .image{
        width: 90%;
        height: 180px;
        margin: 0 auto;
        border-radius:10px;
        margin-top: 20px;
        position: relative;
    }
    #ran{
        width: 100%;
        height: 180px;
        margin: 0 auto;
        display: block;
        border-radius:10px;
    }
    .showdoc{
        position: absolute;
        right:15px;
        bottom: 15px;
        width:80px;
        height:30px;
        background:rgba(0,0,0,1);
        opacity:0.6;
        border-radius:27px;
    }
    #img{
        width: 11px;
        height: 10px;
        position: absolute;
        right:70px;
        bottom: 25px;
    }
    .zhang{
        position: absolute;
        bottom: 21px;
        right: 34px;
        font-size:0.9rem;
        font-family:Source Han Sans SC;

        color:rgba(254,254,254,1);
    }
    .start{
        width: 90%;
        margin: 0 auto;
        display: block;
        margin-top: 40px;
        margin-bottom: 30px;
    }
</style>
<body>
    <div class="big">
        <div class="card">
            <div class="name">{$card['store_name']}</div>
            <div class="zong">
                <div class="left">
                    <p class="rename"><span>{$card['rename']}</span><a>{$card['zhiwei']}</a></p>
                </div>
                <div class="right">
                    {if !empty($card['icon'])}
                    <img class = "img" src = "{$card['icon']}"/>
                    {/if}
                </div>

            </div>
            <div class="both"></div>
            <div class="tel">
                <img src="/static/image/tel.png" class="tel_img"/>
                <p>{$card['phone']}</p>
            </div>
            <div class="tel1">
                <img src="/static/image/address.png" class="tel_img"/>
                {if !empty($address)}
                <p>{$address}</p>
                {else}

                {/if}
            </div>
        </div>
    </div>
    <p class="title">{$card['store_name']}</p>
    {if !empty($content)}
    <div id="content">
       {$content}
    </div>
    {else}
    <div id="content">

    </div>
    {/if}
    <div id="zhan">
        <img src="/static/image/zhan.png"/>
    </div>
    <div id="kai">
        <img src="/static/image/show.png"/>
    </div>
    <div class="wall">
        <img src="/static/image/wall.png"/>
    </div>

    <div class="image" id="images">
        {if !empty($image)}
        <img src="{$image['image']}" id="ran"/>
        {else}
        <img src="/static/image/kong.png" id="ran"/>
        {/if}
        <div class="showdoc">

        </div>
        <div class="right">
            <img src="/static/image/pian.png" id="img"/>
            {if !empty($count)}
            <p class="zhang">{$count}张</p>
            {else}
            <p class="zhang">0张</p>
            {/if}
        </div>
    </div>

    <a href="http://app.mi.com/details?id=com.lcjt.lvyou&ref=search"><img src="/static/image/start.png" class="start"></a>
</body>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var oSpan = $('#content');
    var str = oSpan.html();
    if(str.length == 0){
        $('#zhan').hide();
        $('#kai').hide();
    }
    if(str.length<100){
        $('#zhan').hide();
    }else{
        $('#content').html(str.substring(0,100));
    }

    $('#zhan').click(function () {
        $('#content').html(str);
        $('#zhan').hide();
        $('#kai').show();
    })

    $('#kai').click(function () {
        $('#content').html(str.substring(0,100));
        $('#zhan').show();
        $('#kai').hide();
    })
</script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form','table','laydate','set','upload'], function(){
        $ = layui.jquery;
        uid = {$uid};
        var table = layui.table
            ,admin = layui.admin
            ,element = layui.element
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,form = layui.form,
            upload = layui.upload;
        //定义一个函数绑定事件
        bindTouchEnevt=function() {
            var image = $("#layui-layer-photos").parent();//顶级元素ID会变，但是二层元素是固定ID，所以可以精确获取二层元素，从而精确获取顶级（非遮罩），
            var startX, startY,endX, endY;//开始时的坐标xy  结束时的xy

            //触摸开始触发事件
            $(image).on("touchstart", function (e) {
                e.preventDefault();
                startX = e.originalEvent.changedTouches[0].pageX;//触摸开始时的x坐标
                startY = e.originalEvent.changedTouches[0].pageY;//触摸开始时的Y坐标

            });

            //滑动过程触发的事件
            $(image).on("touchmove", function (e) {
                e.preventDefault();
                endX = e.originalEvent.changedTouches[0].pageX-startX;//此时滑动中的X坐标
                endY = e.originalEvent.changedTouches[0].pageY-startY;//滑动中的Y坐标
            });

            //滑动结束触发的事件
            $(image).on('touchend', function (e) {
                e.preventDefault();
                //对比X值的正负来判断滑动方向，上下滑则判断Y
                if (endX > 0) {
                    //上一个
                    $(image).find('.layui-layer-imgprev').trigger('click');//找到弹出DENO下的上一个按钮，模拟触发点击事件
                } else if (endY < 0) {
                    //下一个
                    $(image).find('.layui-layer-imgnext').trigger('click');//找到弹出DENO下的下一个按钮，模拟触发点击事件
                }

                if (endX < 0) {
                    //上一个
                    $(image).find('.layui-layer-imgprev').trigger('click');//找到弹出DENO下的上一个按钮，模拟触发点击事件
                } else if (endY > 0) {
                    //下一个
                    $(image).find('.layui-layer-imgnext').trigger('click');//找到弹出DENO下的下一个按钮，模拟触发点击事件
                }
            });
        }
        $('#images').click(function () {
            $.ajax({
                url: "{:url('Details/image')}",
                type: 'post',
                dataType: 'json',
                data: {uid:uid},
                success: function(msg){
                    if (msg.code == 0) {
                        var arr  = msg.data;
                        let img_src_arr = [];
                        for (var i in arr) {
                            img_src_arr.push(arr[i].image)
                        }
                        console.log(img_src_arr);
                        var img_src_data = {};
                        img_src_data.title = '照片墙';
                        //img_src_data.id = data.id;
                        img_src_data.start = 0;
                        img_src_data.data =[];

                        var src = {};

                        for(var i=0;i<img_src_arr.length;i++){
                            src = {};
                            var num = i+1;
                            src.alt = '照片墙'+ num;
                            src.pid = i;
                            src.src = img_src_arr[i];
                            src.thumb = img_src_arr[i];
                            console.log(src);
                            img_src_data.data.push(src);
                        }
                        layer.photos({
                            photos: img_src_data
                            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                            ,tab: function(pic, layero){
                                bindTouchEnevt();
                            }
                        });
                    }else{
                        layer.msg(msg.message,{time:1000});
                    }
                }
            });
        })
    });
</script>
</html>